<!--增删管理员的页面-->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space20">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">增删管理员</div>
                        <div class="layui-card-body">
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <fieldset class="layui-elem-field site-demo-button">
                                        <legend>可选操作</legend>
                                        <div class="layui-field-box">
                                            <button type="button" onclick="addNewAdmin()" class="layui-btn">增加管理员
                                            </button>
                                        </div>
                                    </fieldset>
                                </div>
                                <div class="layui-col-md12">
                                    <table class="layui-hide" id="admin_info" lay-filter="admins"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script type="text/html" id="switchTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="sex" value="{{d.id}}" lay-skin="switch" lay-text="女|男" lay-filter="sexDemo" {{ d.id==
           10003 ? 'checked' : '' }}>
</script>

<script type="text/html" id="imageTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <img src="{{d.imageUri}}"/>
</script>

<script type="text/html" id="dateTpl">
    {{
    stamp2Time(d.addingTime)
    }}
</script>

<script type="text/html" id="barDemo">

    <!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>

    var mydata;
    //发送异步请求
    jQuery.ajax({
        url: "/admin/all.do",
        type: "get",
        dataType: "json",
        contentType: "application/json;charset=utf-8"
    }).done(function (data) {
        mydata = data.data;
    }).fail(function (data) {
        layer.alert("请求失败", {icon: 7});
        layer.close(layerIndex);
    });
    layui.use('table', function () {
        var table = layui.table
            , form = layui.form;

        //监听工具条
        table.on('tool(admins)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
            } else if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    deleteAdmin(data.id);
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                layer.alert('编辑行：<br>' + JSON.stringify(data))
            }
        });

        table.render({
            elem: '#admin_info'
            , data: mydata
            , cellMinWidth: 80
            , cols: [[
                {type: 'checkbox'}
                // , {field: 'imageUri', title: '头像', templet: '#imageTpl', unresize: true}
                , {field: 'id', title: 'ID', unresize: true, sort: true}
                , {field: 'name', title: '用户名', templet: '#usernameTpl'}
                , {field: 'sex', title: '性别', templet: '#switchTpl', unresize: true}
                , {field: 'description', title: '描述信息', unresize: true}
                , {field: 'addingTime', title: '添加时间', templet: '#dateTpl', unresize: true}
                , {fixed: 'right', width: 178, align: 'center', toolbar: '#barDemo', title: "操作栏"}
            ]]
            , page: true
        });

        //监听性别操作
        form.on('switch(sexDemo)', function (obj) {
            layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
        });

        //监听锁定操作
        form.on('checkbox(lockDemo)', function (obj) {
            layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
        });
    });

    function stamp2Time(timestamp) {

        var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = date.getDate() + ' ';
        h = date.getHours() + ':';
        m = date.getMinutes() + ':';
        s = date.getSeconds();
        return Y + M + D + h + m + s;
    }
</script>

<script>

    function addNewAdmin() {

        layui.layer.open({
            type: 1,
            title: '增加管理员',
            shade: 0,
            maxmin: true,
            skin: 'layui-layer-rim', //加上边框
            area: ['1024px', '768px'], //宽高
            content: ' <div class="layui-row">' +
            '                                <div class="layui-col-md6 layui-col-md-offset3">' +
            '                                    <h1 style="line-height: 3;text-align: center;">增加管理员信息</h1>' +
            '                                    <form id="form-user-info" class="layui-form layui-form-pane" action="">' +
            '                                     ' +
            '                                            <div class="layui-form-item">' +
            '                                                <label class="layui-form-label">管理员名</label>' +
            '                                                <div class="layui-input-block">' +
            '                                                    <input type="text" name="name" autocomplete="off"' +
            '                                                           placeholder="" class="layui-input">' +
            '                                                </div>' +
            '                                            </div>' +
            '                                            <div class="layui-form-item">' +
            '                                                <label class="layui-form-label">管理员密码</label>' +
            '                                                <div class="layui-input-block">' +
            '                                                    <input type="password" name="password" autocomplete="off"' +
            '                                                           placeholder="" class="layui-input" value="">' +
            '                                                </div>' +
            '                                            </div>' +
            '                                            <div class="layui-form-item" pane="">' +
            '                                                <label class="layui-form-label">性别</label>' +
            ' <div class="layui-input-block">' +
            '<input type="radio" name="sex" value="男" title="男" checked="">' +
            '      <input type="radio" name="sex" value="女" title="女">' +
            '</div>' +
            '                                            </div>' +
            '                                            <div class="layui-form-item">' +
            '                                                <label class="layui-form-label">头像路径</label>' +
            '                                                <div class="layui-input-block">' +
            '                                                    <input type="text" id="image" name="image" autocomplete="off"' +
            '                                                           placeholder="" class="layui-input" value="">' +
            '                                                </div>' +
            '                                            </div>' +
            '                                            <div class="layui-form-item layui-form-text">' +
            '                                                <label class="layui-form-label">人员简述</label>' +
            '                                                <div class="layui-input-block">' +
            '                                                    <textarea name="description" placeholder=""' +
            '                                                              class="layui-textarea"></textarea>' +
            '                                                </div>' +
            '                                            </div>' +
            '                                     ' +
            '                                    </form>' +
            '                                    <div class="layui-btn-container">' +
            '                                        <button type="button" class="layui-btn layui-btn-fluid"' +
            '                                                onclick="sureAdd()">点击增加' +
            '                                        </button>' +
            '                                        <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid">' +
            '                                            取消' +
            '                                        </button>' +
            '                                    </div>' +
            '                                </div>' +
            '                                <div class="layui-col-md3"></div>' +
            '                            </div>'

        });

        layui.form.render();
    }


    function sureAdd() {

        var name = $($('#form-user-info').find('input[name=\'name\']')).val();
        var password = $($('#form-user-info').find('input[name=\'password\']')).val();
        var image = $('#image').val();
        var description = $($('#form-user-info').find('textarea[name=\'description\']')).val();
        var sex = $('.layui-form-radioed').prev().val();
        var obj = new Object();
        obj.name = name;
        obj.password = password;
        obj.image = image;
        obj.decription = description;
        obj.sex = sex;
        var requestJson = JSON.stringify(obj);
        jQuery.ajax({
            url: "/admin/add.do",
            type: "post",
            data: requestJson,
            dataType: "json",
            contentType: "application/json;charset=utf-8"
        }).done(function (data) {
            console.log(data);
            //第三方扩展皮肤
            layer.alert('提交成功。', {
                icon: 6,
                skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
            })
            layer.closeAll();
        }).fail(function (data) {
            layer.alert("请求失败", {icon: 7});
            layer.close(layerIndex);
        });

    }


    function deleteAdmin(id) {
        jQuery.ajax({
            url: "/admin/" + id + ".do",
            type: "delete",
            dataType: "json",
            contentType: "application/json;charset=utf-8"
        }).done(function (data) {
            layer.alert('提交成功。', {
                icon: 6,
                skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
            })
            layer.closeAll();
        }).fail(function (data) {
            layer.alert("请求失败", {icon: 7});
            layer.close(layerIndex);
        });
    }


</script>